import { FormSchema } from '/@/components/Table';
import { BasicColumn } from '/@/components/Table';
import { SelectUserInput, SelectRoleInput } from '/@/components/CustomComp';
import { h } from 'vue';
import { Input, Image } from 'ant-design-vue';
import { useUserStore } from '/@/store/modules/user';
const userStore = useUserStore();
const serverInfo = userStore.getServerInfo;

export const columns: BasicColumn[] = [
  {
    title: 'ID',
    dataIndex: 'id',
    width: 50,
    ifShow: false,
  },
  {
    title: '名称',
    dataIndex: 'title',
    width: 100,
    ellipsis: true,
    resizable: true,
    customRender: ({ record }) => {
      return h(Input, {
        value: record.title,
        onChange: (e) => {
          record.title = e.target.value;
        },
      });
    },
  },
  {
    title: '授权角色',
    dataIndex: 'roleNames',
    width: 100,
    ellipsis: true,
    resizable: true,
    // customRender: ({ record }) => {
    //   return h(SelectRoleInput, {
    //     value: record.roleNames,
    //     roleCodes: record.roleCodes,
    //     onChange: (value, node) => {
    //       console.log('value', value, node);
    //       const { dataRef } = node;
    //       record.roleNames = value;
    //       record.roleCodes = dataRef['codes'];
    //     },
    //   });
    // },
  },
  {
    title: '授权用户',
    dataIndex: 'userRealNames',
    width: 100,
    ellipsis: true,
    resizable: true,
    // customRender: ({ record }) => {
    //   record['hadUsers'] = [];
    //   if (record['userRealNames']) {
    //     const realNames = record['userRealNames'].split(',');
    //     const userNames = record['userNames'].split(',');
    //     realNames.forEach((item, index) => {
    //       record['hadUsers'].push({
    //         key: userNames[index],
    //         name: userNames[index],
    //         title: item,
    //         realName: item,
    //       });
    //     });
    //   }
    //   return h(SelectUserInput, {
    //     value: record.userRealNames,
    //     hadUsers: record['hadUsers'],
    //     onChange: (value, node) => {
    //       console.log('value', value, node);
    //       const { dataRef } = node;
    //       record.userNames = dataRef.userNames;
    //       record.userRealNames = value;
    //       console.log('record.userNames', record.userNames);
    //     },
    //   });
    // },
  },
  {
    title: '图片',
    dataIndex: 'filename',
    width: 100,
    ellipsis: true,
    resizable: true,
  },
  {
    title: '查看',
    dataIndex: 'imgPath',
    width: 50,
    ellipsis: true,
    resizable: true,
    customRender: ({ record }: any) => {
      if (record['imgPath']) {
        return h(Image, {
          preview: true,
          width: 50,
          height: 50,
          src:
            serverInfo.rootPath +
            (record['imgPath'] && record['imgPath'].startsWith('/')
              ? record['imgPath']
              : `/${record['imgPath']}`),
        });
      }
    },
  },
];

export const searchFormSchema: FormSchema[] = [
  {
    field: 'what',
    label: '名称',
    component: 'Input',
    colProps: { span: 6 },
  },
];
export const formSchema: FormSchema[] = [
  {
    field: 'title',
    label: '名称',
    required: true,
    component: 'Input',
    colProps: {
      span: 24,
    },
  },
  {
    field: 'roleNames',
    label: '授权角色',
    component: 'SelectRoleInput',
    componentProps: ({ formModel }) => {
      return {
        value: formModel.roleNames,
        roleCodes: formModel.roleCodes,
        onChange: (value, node) => {
          console.log('value', value, node);
          const { dataRef } = node;
          formModel.roleNames = value;
          formModel.roleCodes = dataRef['codes'];
        },
      };
    },
    colProps: {
      span: 24,
    },
  },
  {
    field: 'roleCodes',
    label: 'roleCodes',
    component: 'Input',
    colProps: {
      span: 24,
    },
    show: false,
  },

  {
    field: 'userRealNames',
    label: '授权用户',
    component: 'SelectUserInput',
    componentProps: ({ formModel }) => {
      formModel['hadUsers'] = [];
      if (formModel['userRealNames']) {
        const realNames = formModel['userRealNames']?.split(',');
        const userNames = formModel['userNames']?.split(',');
        realNames?.forEach((item, index) => {
          formModel['hadUsers'].push({
            key: userNames[index],
            name: userNames[index],
            title: item,
            realName: item,
          });
        });
      }
      return {
        value: formModel.userRealNames,
        hadUsers: formModel['hadUsers'],
        onChange: (value, node) => {
          console.log('value', value, node);
          const { dataRef } = node;
          formModel.userNames = dataRef.userNames;
          console.log('record.userNames', formModel.userNames);
        },
      };
    },
    colProps: {
      span: 24,
    },
  },
  {
    field: 'userNames',
    label: 'userNames',
    component: 'Input',
    colProps: {
      span: 24,
    },
    show: false,
  },
  {
    field: 'filename',
    label: '图片',
    required: true,
    component: 'Select',
    colProps: {
      span: 24,
    },
    slot: 'filename',
  },
];
